import { defineComponent, ref } from "vue";
import styles from "./OperationBtns.module.less";
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue';
const lessVars = require("@/common/css/var");
export default defineComponent({
  props: {
    btns: {
      type: Array,
      required: true,
    },
    origin: {
      type: Object,
    }
  },
  emits: ["deleteRow"],
  setup(props, { emit }) {
    const config = {
      add: {
        size: "small",
        icon: () => <PlusOutlined />,
        color: "primary",
        text: "添加",
      },
      edit: {
        size: "small",
        icon: () => <EditOutlined />,
        color: "success",
        text: "编辑",
      },
      delete: {
        size: "small",
        icon: () => <DeleteOutlined />,
        color: "danger",
        text: "删除",
      },
      detail: {
        size: "small",
        icon: () => <SearchOutlined />,
        color: "primary",
        text: "查看详情",
      }
    }

    const Icon = (e) => {
      if (typeof e === "string") {
        return () => <svg-icon style={{ marginRight: "8px" }} name={e} />
      } else {
        return () => <e style={{ marginRight: "8px" }} />;
      }
    }

    // 获取颜色
    const getColor = (color: string) => {
      switch (color) {
        case "primary":
          return lessVars['primary-color'];
        case "success":
          return lessVars['success-color'];
        case "info":
          return lessVars['info-color'];
        case "warning":
          return lessVars['warning-color'];
        case "danger":
          return lessVars['danger-color'];
        case "error":
          return lessVars['error-color'];
        default:
          return color;
      }
    }

    const Btn = (item, index) => {
      if (item.type === "custom") {
        return item.el(props.origin);
      } else {
        return (
          <a-button v-roles="admin" class={styles.btn} type="primary" style={{ "--btn-color": getColor(item.color ? item.color : config[item.type].color) }} size={item.size ? item.size : config[item.type].size} v-slots={{
            icon: item.icon ? Icon(item.icon) : config[item.type].icon,
          }}>
            {item.text ? item.text : config[item.type].text}
          </a-button>
        )
      }
    }

    const btnClick = (item) => {
      if (typeof item.clickHandler === "string") {
        if (item.clickHandler === "delete") {
          emit("deleteRow");
        }
      } else {
        item.clickHandler?.(props.origin);
      }
    }

    const deletePopconfirmShow = ref(false);

    return () => (
      <div class={styles.OperationBtns}>
        {
          props.btns.map((item: any, index: number) => {
            if (item.type === "delete") {
              return (
                <a-popconfirm
                  placement="bottomRight"
                  title="确定删除?"
                  v-model:visible={deletePopconfirmShow.value}
                  v-slots={{
                    okButton: () => <a-button type="primary" size="small" style={{ fontSize: '12px' }} onClick={() => { deletePopconfirmShow.value = false; btnClick(item) }}>确定</a-button>,
                    cancelButton: () => <a-button size="small" style={{ fontSize: '12px' }} onClick={() => { deletePopconfirmShow.value = false; }}>取消</a-button>,
                  }}
                >
                  {Btn(item, index)}
                </a-popconfirm>
              )
            } else {
              return <div onClick={() => { btnClick?.(item) }}>
                {Btn(item, index)}
              </div>
            }
          })
        }
      </div >
    )
  }
})